<template>
  <div>
    <el-row type="flex" justify="space-between" align="middle">
      <el-col :span="24" class="search-form">
        <el-form :inline="true" :model="formInline" size="mini">
          <el-form-item label="ID搜索:">
            <el-input class="ipt-width-150" v-model="formInline.account" placeholder="输入账号"></el-input>
          </el-form-item>
          <el-form-item label="用户名搜索:">
            <el-input class="ipt-width-150" v-model="formInline.account" placeholder="输入账号"></el-input>
          </el-form-item>
          <el-form-item label="性别选择:">
            <el-select class="ipt-width-150" v-model="formInline.accState" placeholder="选择状态">
              <el-option label="--请选择--" value="0"></el-option>
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchAccount">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addAccount">添加</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="contact">测试</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="user-list">
      <el-col :span="16">
        <el-table
          :header-cell-style="{'text-align':'center'}"
          :body-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          ref="multipleTable"
          border
          style="width: 100%"
        >
          <el-table-column type="selection" label="全选" width="55"></el-table-column>
          <el-table-column prop="id" label="编号" width="50"></el-table-column>
          <el-table-column prop="account" label="帐号" width="120"></el-table-column>
          <el-table-column prop="sf" label="用户身份" width="80"></el-table-column>
          <el-table-column prop="username" label="用户姓名" width="120"></el-table-column>
          <el-table-column prop="sex" label="性别" width="60"></el-table-column>
          <el-table-column prop="city" label="所在地区" width="120"></el-table-column>
          <el-table-column prop="endDate" label="最后登录时间" width="160"></el-table-column>
          <el-table-column prop="regDate" label="注册时间" width="160"></el-table-column>
          <el-table-column prop="accState" label="账号状态" width="80"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="look(scope.row)" type="text" size="small">权限分配</el-button>
              <el-button @click="write(scope.row)" type="text" size="small">角色修改</el-button>
              <el-button @click="write(scope.row)" type="text" size="small">角色删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="btn-group">
          <el-button type="primary" size="mini">批量删除</el-button>
          <el-button type="primary" size="mini">启用帐号</el-button>
          <el-button type="primary" size="mini">冻结账号</el-button>
        </div>
      </el-col>
    </el-row>

    <el-row class="user-list" type="flex" justify="center" style="text-align: center">
      <el-col :span="24">
        <el-pagination
          @current-change="handleCurrentChange"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        ></el-pagination>
      </el-col>
    </el-row>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>编号:{{index.id}}</span>
      <span slot="footer" class="dialog-footer">
        <el-table :data="data" height="250" border style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">{{index.endDate}}</el-table-column>
          <el-table-column prop="name" label="姓名" width="180">{{index.username}}</el-table-column>
          <el-table-column prop="address" label="地址">{{index.city}}</el-table-column>
        </el-table>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.name" ref="name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="form.sex" ref="sex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在地" :label-width="formLabelWidth">
          <el-input v-model="form.city" ref="city" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmed()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "accountManagement",
  data() {
    return {
      formInline: { account: "", sf: "不限", city: "不限", accState: "不限" },
      tableData: [
        {
          id: 1,
          account: "17786479680",
          sf: "雇主",
          username: "张三",
          sex: "男",
          city: "深圳",
          endDate: "2017-11-16 12:30:43",
          regDate: "2017-11-16 12:30:43",
          accState: "正常",
        },
        {
          id: 2,
          account: "17786479680",
          sf: "雇主",
          username: "李四",
          sex: "男",
          city: "深圳",
          endDate: "2017-11-16 12:30:43",
          regDate: "2017-11-16 12:30:43",
          accState: "正常",
        },
        {
          id: 3,
          account: "17786479680",
          sf: "雇主",
          username: "赵二",
          sex: "男",
          city: "深圳",
          endDate: "2017-11-16 12:30:43",
          regDate: "2017-11-16 12:30:43",
          accState: "正常",
        },
        {
          id: 4,
          account: "17786479680",
          sf: "雇主",
          username: "王麻子",
          sex: "男",
          city: "深圳",
          endDate: "2017-11-16 12:30:43",
          regDate: "2017-11-16 12:30:43",
          accState: "正常",
        },
        {
          id: 5,
          account: "17786479680",
          sf: "雇主",
          username: "王五",
          sex: "男",
          city: "深圳",
          endDate: "2017-11-16 12:30:43",
          regDate: "2017-11-16 12:30:43",
          accState: "正常",
        },
      ],
      currentPage: 1,
      pageSize: 4,
      dialogVisible: false,
      index: 0,
      data: [{ endDate: "2017-11-16" }],
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "60px",
      value: "",
    };
  },
  created() { 
    //  console.log(this.$axios)
  },
  methods: {
    contact: function () {
      let that = this;
      let urla = "/api/selectAllRole";
      let data = {
        id: 0,
        limit: 0,
        name: "string",
        page: 0,
      };
      this.$axios({
        method: "post",
        url: urla,
        data: JSON.stringify(data),
      })
        .then((res) => console.log(res))
        .catch((err) => console.log(err));

      // this.$axios.post(urla,data)
      // .then(data=>{
      //   console.log(data)
      // })

      // axios({
      //   method:"post",
      //   url:urla,
      //   headers:{
      //     "Content-Type": "application/json;charset=utf-8"
      //   },
      //   data:JSON.stringify(data)
      // })
      // .then((res)=>console.log(res))
      // .catch(err=>console.log(err))
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    look(row) {
      this.dialogVisible = true;
      this.index = row;
      console.log(this);
    },
    write(row) {
      this.dialogFormVisible = true;
      this.value = row;
      // console.log(this.value);
    },
    confirmed() {
      // console.log(this.value)
      this.value.name = this.$refs.name.value;
      this.value.sex = this.$refs.sex.value;
      this.value.city = this.$refs.city.value;
      console.log(this.tableData[this.value.id - 1].username);
      // this.value.sex = this.$refs.name.value;
      // this.value.city = this.$refs.name.value;
      this.dialogFormVisible = false;
      this.tableData[this.value.id - 1].username = this.value.name;
      this.tableData[this.value.id - 1].sex = this.value.sex;
      this.tableData[this.value.id - 1].city = this.value.city;
    },
    //搜索帐号
    searchAccount() {
      let that = this;
      let url = "/api/user/search";
      let params = that.formInline;

      that.$axios
        .get(url, { params: params })
        .then((result) => {
          // console.log(result)  //axios响应对象，就包括了config,data,...
          // console.log(result.data) // 后台res.json()返回的对象；
          // console.log(result.data.data) // 包括后台res.json()返回的对象中查询的结果对应的数据（数组）；
          if (result.data.status === 200) {
            that.$message({
              message: "查询成功",
              type: "success",
            });
            that.tableData = result.data.data;
          } else {
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    //    添加账号
    addAccount() {
      this.$router.push({ path: "/main/addAccount" });
    },
    handleClick(row, column, index) {
      // console.log(row);
      // console.log(column);
      // console.log(index);
    },
    show() {
      console.log(1);
    },
  },
};
</script>

<style scoped lang="less">
.search-form {
  border: 1px solid #e4e4e4;
  padding: 20px 20px 0;
  box-shadow: 0 0 3px 1px #e4e4e4;
  border-radius: 3px;
}

.ipt-width-150 {
  width: 150px !important;
}

.user-list {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #e4e4e4;
  box-shadow: 0 0 3px 1px #e4e4e4;
  border-radius: 3px;
}

.btn-group {
  margin-top: 20px;
}
</style>